<script setup lang="ts">
import networkPipe from '@/components/ECharts/networkRisk/index.vue';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { useNetworkRiskGradingStore } from '@/store/modules/earlyWarning/networkRiskGrading';
import UNIT_MAP from '@/constants/components/unit';
import dialogPipTable from '@/components/dialogPipTable/index.vue';

const networkRiskGradingStore = useNetworkRiskGradingStore();
</script>

<template>
  <el-row :gutter="20" class="network-box">
    <el-col :span="24">
      <div class="container-box" v-if="networkRiskGradingStore.openRiskPop">
        <div class="container-main-box">
          <div
            :class="['container-item', networkRiskGradingStore.currentIndex === index && 'container-item-active']"
            @click="networkRiskGradingStore.openPipTableHandler(item, index)"
            v-for="(item, index) in networkRiskGradingStore.riskList"
            :key="index"
          >
            <span>{{ item.pipelineName }}</span>
            <span>{{ item.leng + UNIT_MAP.KM }}</span>
          </div>
        </div>
      </div>
      <networkPipe
        @pipAgeClick="networkRiskGradingStore.pipAgeClick"
        :echartsData="networkRiskGradingStore.echartsData"
        :title="COMPONENT_TITLES.NETWORK_TITLE"
      />
      <dialogPipTable />
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.network-box {
  width: 100%;
  height: 100%;
  position: relative;

  .container-box {
    z-index: 99;
    position: absolute;
    left: 0%;
    top: -9%;
    width: 153.88px;
    height: 150px;

    border: 2px solid rgba(95, 175, 255, 0.502);
    background-color: #09306f;
    box-shadow: inset 0px 0px 20px 0px #045bbd;
    box-sizing: border-box;

    .container-main-box {
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #ccd7df;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .container-item {
      width: 100%;
      cursor: pointer;
      text-align: center;
      height: 35px;
      line-height: 35px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .container-item-active {
      cursor: pointer;
      background-image: url(@/assets/largescreen/container-icon.png);
      width: 98%;
      height: 35px;
      line-height: 35px;
      background-size: 100% 100%;
      font-weight: 700;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
